import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init('WebGL-output-test');
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title level={3}>开始</Title>
          <Paragraph>
            <Text>在Three.js中，性能监视器被封装在Stats类中；用法：</Text>
          </Paragraph>
          <Paragraph></Paragraph>
        </Typography>

        <div
          id="WebGL-output-test"
          style={{ width: '600px', height: '600px', position: 'relative' }}
        />
      </Card>
    );
  }
}
